{% extends 'extends/nav_front_all_.html' %}

{% block main %}
<div class="container mt-4">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">个人信息设置</h5>
                </div>

                <div class="card-body">
                    <!-- 1. 个人简介表单 -->
                    <form id="intro-form" class="mb-4 border-bottom pb-4">
                        <h6 class="card-subtitle mb-3 text-muted">个人简介</h6>
                        <div class="form-group">
                            <textarea id="intro-text" name="intro" class="form-control" rows="3"
                                     placeholder="介绍一下你自己...">{{ user.intro }}</textarea>
                        </div>
                        <button type="submit" class="btn btn-sm btn-primary mt-2">保存简介</button>
                    </form>

                    <!-- 2. 头像上传表单 -->
                    <div class="mb-4 border-bottom pb-4">
                        <h6 class="card-subtitle mb-3 text-muted">头像设置</h6>
                        <div class="d-flex align-items-center">
                            <img src="{{ user.img_icon }}" id="current-avatar" class="rounded-circle me-3" width="60" height="60">
                            <button type="button" class="btn btn-outline-info"
                                    onclick="document.getElementById('avatar-input').click()">
                                选择新头像
                            </button>
                            <input type="file" id="avatar-input" accept="image/*"
                                   style="display:none" onchange="handleAvatarUpload(this.files)">
                        </div>
                    </div>

                    <!-- 3. 背景图上传表单 -->
                    <div class="mb-4 border-bottom pb-4">
                        <h6 class="card-subtitle mb-3 text-muted">背景图片</h6>
                        <div class="d-flex align-items-center mb-3">
                            <div class="border p-1 me-3" style="width: 120px; height: 60px; overflow: hidden;">
                                <img src="{{ user.img_background }}" id="current-bg"
                                     style="width: 100%; height: 100%; object-fit: cover;">
                            </div>
                            <button type="button" class="btn btn-outline-warning"
                                    onclick="document.getElementById('bg-input').click()">
                                选择背景图
                            </button>
                            <input type="file" id="bg-input" accept="image/*"
                                   style="display:none" onchange="handleBgUpload(this.files)">
                        </div>
                    </div>

                    <!-- 4. 角色设置表单 -->
                    <form id="role-form">
                        <h6 class="card-subtitle mb-3 text-muted">账户角色</h6>
                        <div class="form-group">
                            <select class="form-control" name="role">
                                <option value="访客" {% if user.role == '访客' %}selected{% endif %}>访客</option>
                                <option value="软件工程" {% if user.role == '软件工程' %}selected{% endif %}>软件工程</option>
                                <option value="金融工程" {% if user.role == '金融工程' %}selected{% endif %}>金融工程</option>
                                <option value="信息管理" {% if user.role == '信息管理' %}selected{% endif %}>信息管理</option>
                                <option value="数字经济" {% if user.role == '数字经济' %}selected{% endif %}>数字经济</option>
                                <option value="会计学" {% if user.role == '会计学' %}selected{% endif %}>会计学</option>
                                <option value="国际贸易" {% if user.role == '国际贸易' %}selected{% endif %}>国际贸易</option>
                                <option value="法学" {% if user.role == '法学' %}selected{% endif %}>法学</option>
                                <option value="统计学" {% if user.role == '统计学' %}selected{% endif %}>统计学</option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-sm btn-success mt-2">更新角色</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
onUrlsReady(urls => {

    Event_('intro-form', 'submit', async (e) => {
        Fetch(urls.service.intro, 'POST', Pack({
            'intro-text':'text'
        }),res=>{
            Flash(res.msg)
        });
    });

    function handleAvatarUpload(files) {
        if (!files.length) return;

        const file = files[0];
        const reader = new FileReader();

        reader.onload = async (e) => {
            Element_('current-avatar').src = e.target.result;

            // 转换为base64并上传
            const base64 = e.target.result
            await Fetch(urls.service.icon, 'POST', {
                image: base64,
            }, (res) => {
                Flash(res.msg);
            });
        };
        reader.readAsDataURL(file);
    }
    Element_('avatar-input').onchange = (e) => handleAvatarUpload(e.target.files);

    // 3. 背景图上传（使用Fetch）
    function handleBgUpload(files) {
        if (!files.length) return;

        const file = files[0];
        const reader = new FileReader();

        reader.onload = async (e) => {
            // 显示预览
            Element_('current-bg').src = e.target.result;

            const base64 = e.target.result
            await Fetch(urls.service.background, 'POST', {
                image: base64,
            }, (res) => {
                Flash(res.msg);
            });
        };
        reader.readAsDataURL(file);
    }
    Element_('bg-input').onchange = (e) => handleBgUpload(e.target.files);

    Event_('role-form', 'submit', async (e) => {
        const role = Element_('role-form').role.value;
        const response = await Fetch(urls.service.role, 'POST', {text:role},res=>{
            Flash(res.msg)
        });
    });
});
</script>

<style>
/* 按钮悬停效果 */
.btn-outline-info:hover, .btn-outline-warning:hover {
    color: white;
}
/* 背景图预览框样式 */
.bg-preview-container {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    overflow: hidden;
}
</style>
{% endblock %}